import React, { Component } from 'react';
import { toJS } from 'mobx';
import { Avatar, Tools, Icon } from 'weaver-mobile';
import { RouteLayout } from 'weaver-mobile-page';
import { observer, inject } from 'mobx-react';

const getLabel = Tools.getLabel;

@inject('shareStore')
@observer
export default class RelatedGroup extends Component {

  constructor(props) {
    super(props);

    this.store = props.shareStore;
  }

  updateState = newState => this.setState({ ...newState });

  createNewGroup = () => {
    const { sendMsg } = this.props;
    const { createNewGroupIds, isInEM } = this.store;

    sendMsg('chat', createNewGroupIds, isInEM ? { groupMembers: createNewGroupIds } : { create_group_members: createNewGroupIds }, -3);
  }

  render() {
    const { wrapCls, doGroupConfirm } = this.props;
    const { relatedGroupList } = this.store;

    return (
      <RouteLayout>
        <div className={`${wrapCls}-relatedGroup wm-route-layout`} key="relatedGroup">
          <div className={`${wrapCls}-relatedGroup-add`} onClick={this.createNewGroup}>
            <Icon type="plus" size="sm" />
            {getLabel('513338', '创建一个新的群')}
          </div>
          <div className={`${wrapCls}-relatedGroup-title`}>
            {getLabel('513337', '所选人员的群聊已存在，选择已有群可避免重复建群')}
          </div>
          <div className={`${wrapCls}-group-list ${wrapCls}-relatedGroup-list`} >
            {toJS(relatedGroupList).map((data, index) => (
              <div className={`${wrapCls}-list`} key={`groupItem_${index}`} onClick={() => doGroupConfirm(data, -3)}>
                <Avatar name={data.group_name} url={data.imgUrl} isGroup={true} type="0" />
                <div className={`${wrapCls}-list-right`}>
                  <div className={`${wrapCls}-list-right-top`}>{data.group_name}</div>
                  <div className={`${wrapCls}-list-right-bottom`}>{data.msg_last_content}</div>
                </div>
                <div className={`${wrapCls}-list-time`}>{data.msg_last_time.substring(data.msg_last_time.indexOf(' ') + 1, data.msg_last_time.lastIndexOf(':'))}</div>
              </div>
            ))}
          </div>
        </div>
      </RouteLayout>
    );
  }
}
